<template>
  <div class="product-detail">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="商品详情"
      fixed
      placeholder
      @click-left="$router.go(-1)"
    >
      <template #left>
        <van-icon name="arrow-left" />
        <span class="van-icon">返回</span>
      </template>
    </van-nav-bar>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" @change="onChange" indicator-color="white">
      <van-swipe-item v-for="(item, index) in imgList" :key="index">
        <img class="img" :src="item" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          {{ current + 1 }}/{{ imgList.length }}
        </div>
      </template>
    </van-swipe>
    <!-- 商品详情介绍 -->
    <div class="detail-item">
      <div>
        <van-tag class="mr-5" type="primary">直降</van-tag>
        <van-tag class="mr-5" type="success">包邮</van-tag>
        <span class="f16">
          {{ detailObj.masterName }}
          {{ detailObj.slaveName }}
        </span>
      </div>
      <div class="f999 mt-5">果园生态种植 皮薄香甜爽口 富含天然维C</div>
      <div class="flex jc-sb mt-10">
        <span>
          <span class="red mr-5"
            >￥ <span class="f18">{{ detailObj.minPrice | fMoney }}</span></span
          >
          <span>￥{{ detailObj.maxPrice | fMoney }}</span>
        </span>
        <span class="f999">{{ detailObj.inventory }}人购买</span>
      </div>
      <div class="mt-10 bdb">
        <van-cell title="规格： X 2" is-link />
      </div>
      <div class="flex jc-sb aic detail-d bdb">
        <p class="ovt flex fdc detail-text">
          <span class="f999 f14">配送至:</span>
          <span class="ovt"
            >上海黄浦区非机动啥假发票感觉到破案机机感觉到破案机机感觉到破案机机机机机构</span
          >
        </p>
        <van-icon name="arrow" size="18" color="#969799" />
      </div>
      <div class="mt-5 pl-15">
        <van-icon
          name="passed"
          icon-size="12px"
          color="red"
          style="margin-right: 5px"
        />
        <span class="f999">包邮</span>
      </div>
    </div>
    <!-- 图文详解 -->
    <div>
      <div
        class="mt-10 f12 fcc color-gray"
        style="background-color: white; height: 46px"
      >
        —— 商品详情 ——
      </div>
      <div
        class="detail-desc"
        v-for="(item, index) in descPicsList"
        :key="'desc' + index"
      >
        <img :src="item" />
      </div>
      <div
        class="mt-10 f12 fcc color-gray"
        style="background-color: white; height: 46px"
      >
        —— 预定流程及须知 ——
      </div>
      <img
        class="desc-img"
        src="https://file.sdyxmall.com/h5/v1/public/app/img/group5.b0b24d0.png"
      />
      <div class="context">
        <p class="big-item">一、关于发货</p>
        <p class="small-item">
          个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；
        </p>
        <p class="big-item">二、关于发货</p>
        <p class="small-item">
          个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；
        </p>
        <p class="big-item">二、关于发货</p>
        <p class="small-item">
          个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；
        </p>
        <p class="big-item">二、关于发货</p>
        <p class="small-item">
          个工作日内发出（周末、法定节假日需顺延）个工作日内发出（周末、法定节假日需顺延）；
        </p>
      </div>
    </div>
    <!-- 商品导航 -->
    <div class="bg-fff">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="like-o" text="收藏" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          :badge="cartNum"
          to="/cart"
        />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="addCart"
        />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import $http from "@/utils/request";
export default {
  data() {
    return {
      product: {}, //商品列表传过来的参数
      detailObj: {}, // 详情对象
      imgList: [], //轮播图
      current: 0,
      descPicsList: [], //图片详情
      cartNum: 0, //购物车数量
    };
  },
  created() {
    //商品列表参数
    this.product = this.$route.params;
    //渲染
    this.getDetail();
  },
  methods: {
    //加入购物车
    addCart() {
      $http.post("/cart/add", this.product).then((res) => {
        res.code === 666 && this.cartNum++;
      });
    },
    //获取详情数据
    getDetail() {
      $http.get("/product/detail", { params: this.product }).then((res) => {
        const { banners, descPics, cartNum } = res.result;
        this.detailObj = res.result;
        this.imgList = banners;
        this.descPicsList = descPics;
        // 给购物车数量重新赋值
        this.cartNum = cartNum;
      });
    },
    onChange(index) {
      this.current = index;
    },
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar .van-icon {
  color: #c03131;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  .img {
    width: 100%;
    height: 325px;
  }
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
.detail-item {
  padding: 15px;
  height: 250px;
  background-color: #fff;
}
.detail-d {
  padding: 10px 16px;
}
.detail-text {
  width: 240px;
}
//图文详解
.color-gray {
  color: #797d82;
}
.detail-desc {
  width: 100%;
  img {
    width: 100%;
  }
}
.desc-img {
  width: 100%;
  height: 50px;
  background-color: #fff;
}
.context {
  background-color: white;
  padding: 15px 15px 65px;
}
.big-item {
  margin: 12px 0;
  font-size: 12px;
  font-weight: 600;
  color: #a6a6a6;
  line-height: 200%;
}

.small-item {
  margin: 12px 0;
  font-size: 12px;
  color: #a6a6a6;
  line-height: 200%;
}
//商品导航
.van-goods-action-button--last {
  margin-right: 5px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.van-goods-action-button--first {
  margin-left: 5px;
  border-top-left-radius: 999px;
  border-bottom-left-radius: 0px;
}
</style>
